<template>
    <div>
        <div class="logoImgs">
            <div class="logoimg2" v-if="banner">
                <div class="logoImg4" v-for="(i,index) in banner">
                    <img :src="i|filtersImg" alt="">
                    <p style="cursor: pointer" @click="deletes(index)">删除</p>
                </div>
            </div>
            <el-upload
                    list-type="picture-card"
                    ref='upload'
                    :action='imgupload'
                    class="upload-demo"
                    accept="image/jpeg,image/gif,image/png"
                    :show-file-list="false"
                    name="file"
                    :on-success="upimg"
            >
                <i class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
        </div>
    </div>
</template>
<style>
    .logoImgs {
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
    }

    .logoimg2 {
        display: flex;
        justify-content: flex-start;
        align-items: center;

    }

    .logoimg2 img {
        width: 150px;
        height: 150px;
        margin-right: 10px;
    }

    .logoImg4 {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }
</style>
<script>
    import {basefile, imgupload} from '@/config/env.js';

    export default {
        data() {
            return {
                id: sessionStorage.getItem('statusId') ? parseInt(sessionStorage.getItem('statusId')) : 0,
                banner: [],
                imgupload: imgupload,
            }
        },
        props: {
            imgs: ''
        },
        methods: {
            //banner图片上传
            upimg(res, file) {
                this.banner.push(res.data.path)
            },
            deletes(e) {
                this.banner.splice(e, 1)
            }
        },
        filters: {
            filtersImg: function (img) {
                return basefile + img
            },
        },
        mounted() {
            var that = this;
        },
        watch: {
            imgs(newValue, oldValue) {
                this.banner = this.imgs.split(",")
                console.log(this.banner);
            },
            banner(newValue, oldValue) {
                this.$emit("update:imgs", newValue.toString());
            },
        }
    }
</script>

<style scoped>

</style>
